<!--
    https://www.jianshu.com/p/a0ce39e81dd7
    plotly.js 在client-side js里的使用
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
        <title>plotly.js demo</title>
    </head>

    <body>
        <div id="plotly_id" style="width: 600px;height: 250px;"></div>
        <div id="math-function" style="width: 600px;height: 250px;"></div>

        <!--
            https://www.youtube.com/watch?v=2-tnkzG0sKU
            用plotly.js 创建实时的数据据，每隔一段时间刷新一次（不过水平轴仍不是时间）
            历史数据在空间上不断被挤压，没有丢失，这一点可以
        -->
        <div class="navbar"><span>Real-time char with plotly.js</span></div>
        <div class="wrapper">
            <div id="chart"></div>

            <script>
                function getData() {
                    return Math.random()
                }

                Plotly.plot('chart', [{
                    y: [getData()],
                    type: 'line'
                }]);

                setInterval(function() {
                    Plotly.extendTraces('chart', { y: [[getData()]]}, [0]);
                }, 500);
            </script>

            
        </div>

    </body>

    <script>
        tester = document.getElementById("plotly_id");
        Plotly.plot(tester, [{
            x: [1,2,3,4,5],
            y: [1,2,4,8,16]
        }], {
            margin: {t: 0}
        })
    </script>

    <script>
        tester2 = document.getElementById("math-function");
        var x = [], y = [];
        for (var i=-10; i<10; i+=1) {
            x.push(i);
            y.push(2*i+1);
        }
        Plotly.plot(tester2, [{
            x: x,
            y: y
        }], {
            margin: {t: 0}
        })
    </script>
</html>